<template name="editCk">
	<view class="mask" v-if="isShow" @tap="close">
		<view class="bottomBox">
			<view class="titleBox">
				<text>{{title}}</text>
				<text class="iconfont icon-guanbi1" @tap="close"></text>
			</view>
			<view class="studentList">
				<view class="row">
					<text class="name">{{student.name}}</text>
					<text class="btn" v-if="!isBuke" :class="[workStatus==2?'active':'']" @tap.stop="toggleWork(2)">请假</text>
					<!-- <text class="btn" :class="[workStatus==3?'active':'']"  @tap.stop="toggleWork(3)">缺勤</text> -->
					<text class="btn" v-if="!isBuke" :class="[workStatus==1?'active':'']"  @tap.stop="toggleWork(1)">签到</text>
					<text class="btn" v-if="isBuke" :class="[workStatus==4?'active':'']"  @tap.stop="toggleWork(4)">补课</text>
				</view>
			</view>
			<view class="btnGroup">
				<button @tap.stop="editWorkStatus">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapGetters,mapMutation,mapActions} from "vuex";
	import API from "@/common/api.js";
	export default{	
		name:'editCk',		//组件名称
		// 传递参数
		props:{
			student:{
				type:Object,
				default:()=>{
					return {
						name:'',
						status:0
					}
				}
			},
			title:{
				type:String,
				default:''
			}
		},
		watch:{
			student(newVal){
				this.workStatus=newVal.status;
				this.isBuke=newVal.status==4?true:false;
			}
		},
		// 组件参数
		data(){
			return {
				isShow:false,
				workStatus:0,
				isBuke:false
			}
		},
		// 组件方法
		methods:{
			close(){
				this.isShow=false;
			},
			show(){
				this.workStatus=this.student.status;
				this.isBuke=this.student.status==4?true:false;
				this.isShow=true;
			},
			editWorkStatus(){
				API.editCheckWork({
					id:this.student.id,
					status:this.workStatus
				}).then(res=>{
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					});
					this.close();
					uni.$emit("upList")
				})
			},
			toggleWork(e){
				if(this.workStatus==4){
					this.workStatus=0
				}else{
					this.workStatus=parseInt(e);
				}
			}
		}
	}
</script>

<style lang="less">
	.mask{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 999;
		background-color: rgba(0,0,0,0.5);
		display: flex;
		align-items: flex-end;
		.bottomBox{
			background-color: #FFFFFF;
			width: 100%;
			display: flex;
			flex-direction: column;
			.titleBox{
				display: flex;
				align-items: center;
				padding: 20upx 30upx;
				text:first-child{
					font-size: 36upx;
					flex-grow: 1;
				}
				.iconfont{
					font-size: 40upx;
					color: #666;
					font-weight: bold;
				}
			}
			.btnGroup{
				display: flex;
				padding: 30upx 100upx;
				button{
					height: 80upx;
					line-height: 80upx;
					background-color: #ffcd11;
					width: 100%;
					border: none;
					border-radius: 40upx;
					color: #FFFFFF;
				}
			}
			.studentList{
				display: flex;
				flex-direction: column;
				min-height: 200upx;
				background-color: #f6f6f6;
				padding: 20upx;
				.row{
					display: flex;
					align-items: center;
					background-color: #FFFFFF;
					border-radius: 10upx;
					padding:20upx;
					box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
					.name{
						font-size: 32upx;
						flex-grow: 1;
					}
					.btn{
						border: 1px solid #a6a3c0;
						font-size: 28upx;
						padding:20upx 30upx;
						margin-left: 30upx;
						border-radius: 10upx;
						color: #a6a3c0;
					}
					.active{
						background-color: #ffcd11;
						color: #FFFFFF;
						border: 1px solid #ffcd11;
					}
					
				}
			}
		}
	}
</style>
